<template>
  <div class="myhome">
    <!-- 顶部 -->
    <div class="myhome-top">
      <UserMyHomeTop
        :data="data"
        :sharedNum="sharedNum"
        :likesNum="likesNum"
        :commentsNum="commentsNum"
      />
    </div>
    <div class="myHomeFooter">
      <!-- search -->
      <div class="search">
        <ul class="workStatus">
          <li v-for="(item, index) in workStatusData" :key="index">
            <UserMyHomeTab
              :workStatus="workStatus"
              :item="item"
              @onCutTab="onCutTab"
            />
          </li>
          <li>
            <UserMySelect
              v-model:first-name="optionVal"
              :selectArr="selectArr"
              @selectChange="selectChange"
              @onSelect="onSelect"
              @clearArr="clearArr"
            />
          </li>
        </ul>

        <div class="selIpt" style="margin: 20px 0px">
          <el-input
            v-model="searchTitle"
            style="width: 240px; margin-right: 10px"
            placeholder="请输入标题"
            clearable
            @keyup.enter.native="onSearchTitle"
          />
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </div>
      </div>
      <!-- 新加乐谱 -->
      <el-button
        v-if="workStatus === '3'"
        style="margin-bottom: 20px"
        plain
        @click="onAddListShow"
      >
        新建乐谱
      </el-button>
      <div class="useraddList">
        <UserAddList
          v-model:first-name="dialogFormVisible"
          :form="form"
          :data="data"
          :Share="Share"
          @onAddList="onAddList"
        />
      </div>
      <!-- 筛选内容 -->
      <div class="screenList">
        <Interaction
          v-if="
            (Share?.length > 0 && ShareData?.length > 0) || searchTitle == ''
          "
          :type="type"
          :Share="searchTitle !== '' ? ShareData : Share"
          @custom-event1="StateInfo"
        />
        <el-empty
          v-else
          description="没有找到作品"
          image="https://5b0988e595225.cdn.sohucs.com/images/20181109/010adf7027ca49129279f668243f3f53.gif"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import Interaction from "../../../components/Interaction.vue";
import { UserInfoApi } from "../../../api/index";
import MyHomeApi from "../../../api/index";
import UserMyHomeTop from "@/components/myHome/UserMyHomeTop.vue";
import UserMyHomeTab from "@/components/myHome/UserMyHomeTab.vue";
import UserMySelect from "@/components/myHome/UserMySelect.vue";
import UserAddList from "@/components/myHome/UserAddList.vue";

// 分享次数
const sharedNum = ref(11);
// 点赞数
const likesNum = ref(200);
// 评论次数
const commentsNum = ref(50);
let Share = ref([]);
let ShareData = ref([]);

// 搜索数据
const type = ref("1");
const workStatus = ref("1");
const workStatusData = ref([
  {
    id: "1",
    title: "个人公开作品",
  },
  {
    id: "2",
    title: "分享作品",
  },
  {
    id: "3",
    title: "编辑区",
  },
]);
const onCutTab = async (item: any) => {
  if (item.id === "1") {
    getList(1, data.value.id);
    searchTitle.value = "";
  } else if (item.id === "2") {
    getList(2, data.value.id);
    searchTitle.value = "";
  } else if (item.id === "3") {
    getList(3, data.value.id);
    searchTitle.value = "";
  }
  workStatus.value = item.id;
  type.value = item.id;
};
const searchTitle = ref("");
const onSearchTitle = (e: any) => {
  if (e.keyCode == 13) {
    if (!searchTitle.value) {
      return getList(workStatus.value, data.value.id);
    } else {
      ShareData.value = Share.value.filter((item) => {
        return item.title.includes(searchTitle.value);
      });
    }
  }
};
const onSubmit = computed(() => {
  if (!searchTitle.value) {
    return getList(workStatus.value, data.value.id);
  } else {
    ShareData.value = Share.value.filter((item) => {
      return item.title.includes(searchTitle.value);
    });
  }
});

// 下拉框
interface iSelectArr {
  id: number;
  value: string;
  label: string;
}
const optionVal = ref("");
const selectArr = ref<iSelectArr[]>([
  { id: 0, value: "全部", label: "全部" },
  { id: 1, value: "自定义分组一", label: "自定义分组一" },
  { id: 2, value: "自定义分组二", label: "自定义分组二" },
  { id: 3, value: "自定义分组三", label: "自定义分组三" },
  { id: 4, value: "自定义分组四", label: "自定义分组四" },
]);

let delData = ref({});
const clearArr = (data: iSelectArr) => {
  delData.value = data;
  selectArr.value = selectArr.value.filter((item) => item.id !== data.id);
};
const onSelect = (data: iSelectArr) => {
  console.log(data, "onSelect");
};
const selectChange = () => {
  if (optionVal.value == delData.value.label) {
    selectArr.value = selectArr.value.filter(
      (item) => item.id !== delData.value.id
    );
    optionVal.value = "";
  }
};

// 新加乐谱
const dialogFormVisible = ref(false);
const form = ref({
  title:'',
  region: "",
  speed: "",
});
const onAddListShow = () => {
  dialogFormVisible.value = true;
  form.value = {
    title:'',
    region: "",
    speed: "",
  };
};
const onAddList = (item) => {
  MyHomeApi.getEditList(3, data.value.id).then((msg) => {
    Share.value = msg.data.data;
  });
  dialogFormVisible.value = false;
};

const StateInfo = (item) => {
  console.log("StateItem: " + item);
  Share.value = item;
  ShareData.value = item;
  getList(workStatus.value, data.value.id);
};

// 模拟数据
const data: any = ref({});

const getList = (id: any, list: any) => {
  MyHomeApi.getEditList(id, list).then((res) => {
    return (Share.value = res.data.data);
  });
};

onMounted(() => {
  data.value = JSON.parse(localStorage.getItem("user"));
  getList(type.value, data.value.id);
});
</script>
<style scoped lang="scss">
.myhome {
  width: 100%;
  height: 100%;
  .search {
    margin-top: 40px;
    .workStatus {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: flex-start;
    }
    .option {
      display: flex;
      justify-content: space-around;
    }
    .demo-form-inline {
      margin-top: 20px;
    }
  }
  .Interaction {
    margin-top: 50px;
  }
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.example-showcase .el-loading-mask {
  z-index: 9;
}
</style>
